<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul id="box">
    <!-- 课程大纲 -->
    <li>GIT和NPM操作</li>
    <li>面向对象和原型: 研究插件源码</li>
    <li>闭包作用域: 堆栈内存处理</li>
    <li id="fangqi">ES6从入门到放弃</li>
    <li>同步异步编程及核心：微任务、宏任务、事件循环</li>
    <li>DOM及时间模型</li>
    <li>jQuery及源码分析</li>
    <li>设计模式： 发布订阅、单例、Promise、PromiseA+</li>
    <li>AJAX及跨域解决方案：封装一款超牛X的AJAX库</li>
    <li>一入HTTP就深似海</li>
    <li>性能优化</li>
    <li>Vue全家桶</li>
    <li>vue和vuex的核心源码</li>
    <li>react全家桶</li>
    <li>react核心原理</li>
    <li>REDUX源码和中间编写</li>
    <li>webpack</li>
    <li>node和express</li>
    <li>typescript</li>
    我的天, 这么多内容
  </ul>

  <script>
    let box = document.getElementById('box');
    // 标准浏览器(费IE6~8)中会把空格和换行当做文本节点处理(childNodes包含所有节点)
    // console.log(box.childNodes);

    // 只想要元素节点(但是IE6~8下, 使用children会把注释也当做元素节点)
    // console.log(box.children);

    /* 
     * children: 获取指定上下文中, 所有元素子节点
     *    @params: 
     *      context [element object] 指定的上下文元素信息
     *    @return
     *      [array] 返回所有的元素子节点集合
     * by chenjing on 2021/01/23
    */
    /* function children(context) {
      // 1. 获取所有的子节点
      let res = [];
      let nodeList = context.childNodes;
      // 2.循环遍历所有的子节点, 找出元素子节点(nodeType === 1), 存储到res中即可
      for(var i = 0; i < nodeList.length; i++) {
        var item = nodeList[i];
        item.nodeType === 1 ? res.push(item) : null;
      }
      return res;
    }

    console.log(children(box)); */


    /* console.log(box.firstChild);
    console.log(box.firstElementChild);
    console.log(box.lastChild);
    console.log(box.lastElementChild); */

    var fangqi = document.getElementById('fangqi');
    /* console.log(fangqi.previousSibling);
    console.log(fangqi.previousElementSibling); */

    // 获取上一个哥哥元素节点
    function prev(context) {
      var pre = context.previousSibling;
      // 如果哥哥不是元素, 则找哥哥的哥哥, 一直到找到元素节点为止
      while(pre.nodeType !== 1) {
        pre = pre.previousSibling;
      }
      return pre;
    }
    console.log(prev(fangqi));
  </script>
</body>
</html>